import {BookModel} from "../../models/book.js";
import {random} from "../../utils/common.js";

const bookModel = new BookModel();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    books:[],
    searching:false,
    more:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    bookModel.getHotList().then(res=>{
      this.setData({
        books:res
      })
    });
  },

  /**
   * 点击搜索input，隐藏图书，展示输入框
   * @param event
   */
  onSearching(event){
    this.setData({
      searching:true
    });
  },

  /**
   * 点击取消按钮，退出搜索状态，展现图书
   * 这个onCancel命名和组件里的onCancel命名重名没有关系，即使这里onCancel命名为onCanceld也可以监听到组件点击取消搜索事件
   * 为什么可以监听到呢？
   * 注意在book.wxml里的绑定事件是bind:cancel="onCancel",bind后的cancel就对应组件onCancel中的第一个参数
   * 所以他是这样监听到从组件传递过来的取消事件
   * @param event
   */
  onCancel(event){
    this.setData({
      searching:false
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 有两种处理下滑加载更多的方案：使用微信组件scroll-view或者在page使用onReachBottom
   * 下滑页面底部触发的事件
   */
  onReachBottom: function () {
    //由于组件是当more值改变才会触发observer函数，继而才会加载更多书籍数据
    //所以more值一定要和上一次不一样，这里使用随机的16个字符组合保持两次的值不一样
    this.setData({
      more: random(16)
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})